<template>
  <view class="actmorePage">
    <!-- 标题 -->
    <shopro-navbar
      back-icon-color="#020202"
      :background="{ background: '#fff' }"
      @backHandler="goBack"
      :backTextStyle="{
        color: '#020202',
        fontSize: '36rpx',
        fontWeight: '400',
      }"
      :isBack="true">
      <view slot="content" class="u-flex nav-wrap">
        <view class="nav-item">活动预告</view>
      </view>
    </shopro-navbar>
    <view class="moreContent">
      <view
        class="moreList"
        v-for="(item, index) in list"
        :key="index"
        @click="lookDetail(item)">
        <image class="imgs" :src="item.image" mode="aspectFill"></image>
        <view class="moreRight">
          <view class="moreRightTop">
            <text class="name">{{ item.title }}</text>
<!--            <text class="time">{{ item.time_text }}</text>-->
          </view>
          <view class="u-ellipsis-2" v-html="item.project_content"></view>
          <!-- <view class="more">
            查看详情
            <image
              class="imgs"
              src="/static/images/finance/more.png"
              mode="widthFix"></image>
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      title: "",
      list: [
        {
          name: 3,
          desc: "活动简介在此处显示，活动简介在 此处显示。",
        },
      ],
    };
  },
  props: {},
  onLoad(options) {
    this.getlist(options.type);
  },
  computed: {},
  created() {},
  onShow() {
    // this.getlist(this.title);
  },
  methods: {
    getlist(type) {
      this.$new_http("finance.activeList", {
		  teacher_id:type
	  }).then((res) => {
        console.log(res.data.data);
        this.list = res.data.data;
      });
    },
    handleDetail(val) {
      console.log(val);
      if (this.title == "名师") {
        uni.navigateTo({
          url: "/pages/finance/teacherDetail?val=" + val.id,
        });
      } else {
        uni.navigateTo({
          url: "/pages/finance/companyDetail?val=" + val.id,
        });
      }
    },
    lookDetail(val) {
      uni.navigateTo({
        url: "/pages/finance/activityDetail?id=" + val.id,
      });
    },
  },
};
</script>

<style lang="scss">
.actmorePage {
  background: #f7f7f7;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);

  .nav-wrap {
    width: 100%;
    text-align: center;
  }

  .nav-item {
    width: 100%;
	  font-size: 32rpx;
  }

  .moreContent {
    padding: 0 30rpx;

    .moreList {
      width: 100%;
      padding: 30rpx 10rpx 30rpx 21rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin-top: 20rpx;
      display: flex;

      .imgs {
        width: 200rpx;
        height: 140rpx;
      }
      .moreRightTop {
        display: flex;
        justify-content: space-between;
        .name {
          font-family: PingFang;
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
          //width: 213rpx;
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
        .time {
          font-size: 26rpx;
        }
      }
      .moreRight {
        width: 431rpx;
        margin-left: 28rpx;
        position: relative;
        .more {
          font-size: 28rpx;
          color: #999;
          position: absolute;
          right: 10rpx;
          bottom: -10rpx;
          .imgs {
            width: 13rpx;
            margin-left: 16rpx;
            vertical-align: middle;
            margin-top: -4rpx;
          }
        }
        .name {
          font-family: PingFang;
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
        }

        .hite {
          // margin-top: 20rpx;
          font-family: PingFang;
          font-weight: 500;
          font-size: 28rpx;
          color: #666666;
          line-height: 42rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  // 公司
  .moreContentCom {
    padding: 0 30rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .moreList {
      width: 327rpx;
      padding: 30rpx 10rpx 30rpx 21rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin-top: 20rpx;
      // display: flex;

      .imgs {
        width: 150rpx;
        height: 150rpx;
        margin-right: 24rpx;
        border-radius: 50%;
        display: block;
        margin: 20rpx auto 26rpx;
      }

      .moreRight {
        // width: 431rpx;
        margin-left: 28rpx;

        .name {
          font-family: PingFang;
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
        }

        .hite {
          margin-top: 20rpx;
          font-family: PingFang;
          font-weight: 500;
          font-size: 28rpx;
          color: #666666;
          line-height: 42rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
